    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>手风琴案例</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                height: 360px;
                width: 1150px;
                border: 3px solid #2b0ccc;
                margin: 10px auto;
                /*overflow: hidden;//重点这个必须要有不然撑死盒子*/
                overflow: hidden;
            }
            #ul{
                width: 110%;
                height: 100%;
            }
            #ul li{
                list-style: none;
                width: 240px;
                height: 360px;
                float: left;

            }
        </style>
        <script src="jQuery1.0.0.1.js"></script>
    </head>
    <body>
    <div class="box">
        <ul id="ul">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //需求：点击每一个颜色页面显示整个页面
        //做法，先对li进行图片添加 然后再进行干死其他所有只留他一个
        //主要是对哦函数进行调用操作
        var box=document.getElementsByClassName('box')[0];
        var ul=document.getElementById('ul');
        var liArr=ul.children;
        for (var i=0;i<liArr.length;i++){
            liArr[i].style.background="url(img/"+(i+1)+".jpg) no-repeat";
            liArr[i].onmouseover=function () {
                for (var j=0;j<liArr.length;j++){
                    animo(liArr[j],{"width":100});

                }
                animo(this,{"width":800});
            }

            liArr[i].onmouseout=function () {
                for (var j=0;j<liArr.length;j++){
                    animo(liArr[j],{"width":240});
                }

            }
        }




        function animo(ele,json,fn) {
            clearInterval(ele.timer);

            ele.timer=setInterval(function () {
                var bool=true;
                for (var k in json){
                    var present=parseInt(getStyle(ele,k))||0;
                    var space=(json[k]-present)/10;
                    space=space>0?Math.ceil(space):Math.floor(space);

                    present=present+space;

                    ele.style[k]=present+"px";

                    if (json[k]!==present){
                        bool=false;
                    }
                }
                console.log("看到此消息证明还么有清楚计时器");
                if(bool){
                    clearInterval(ele.timer);
                    if (fn){
                        fn();
                    }
                }
            },10)
        }
        function getStyle(ele,zhi) {
            if (window.getComputedStyle(ele)){
                return window.getComputedStyle(ele,null)[zhi];
            }
            return  ele.currentStyle[zhi];
        }
    </script>
    </body>
    </html>